<template>
    <el-dialog
        v-model="routeRootPathDeleteDialogVisible"
        title="删除路由文根"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        是否确定删除？
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="deleteLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {routeRootPathInfoDelete, routeRootPathInfoQuery} from "@/request/routeRootPath";
import {ElNotification} from "element-plus";
import {componentInfoQueryNoContent} from "@/request/components";

export default {
    name: "DeleteRouteRootPathDialog",
    props: ['routeRootPathForm'],
    data() {
        return {
            deleteLoading: false
        }
    },
    computed: {
        routeRootPathDeleteDialogVisible() {
            return this.$store.state.routeRootPathDeleteDialogVisible;
        },
        routeRootPathSearchData() {
            return this.$store.state.routeRootPathSearchData;
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.routeRootPathDeleteDialogVisible = false;
        },
        submitDialog() {
            this.deleteLoading = true
            routeRootPathInfoDelete(this.routeRootPathForm).then(result => {
                if (result.code === '200') {
                    ElNotification({
                        title: 'Success',
                        message: result.message,
                        type: 'success'
                    });
                    routeRootPathInfoQuery(this.routeRootPathSearchData).then(res => {
                        // 查询所有组件
                        let param = {
                            pageInfo: {
                                pageIndex: 1,
                                pageSize: 10000
                            }
                        }
                        componentInfoQueryNoContent(param).then(info => {
                            // 根据componentId匹配数据
                            let resData = res.data.dataList;
                            for (let i = 0; i < resData.length; i++) {
                                let data = resData[i];
                                let filterRes = info.data.dataList.filter(res => res.id === data.componentId);
                                if (filterRes.length > 0) {
                                    data.componentName = filterRes[0].componentCnName;
                                }
                            }
                            this.$store.state.routeRootPathDataList = res.data
                        })
                    })
                    this.deleteLoading = false
                    this.$store.state.routeRootPathDeleteDialogVisible = false;
                }
            }).catch(res => {
                this.deleteLoading = false
            })
        }
    }
}
</script>

<style scoped lang="less">

</style>